<template>
  <div class="icons">
    <swiper :options="swiperOptions">
       <swiper-slide v-for="page of pages" :key="page.id">
        <div class="icon" v-for="item of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl" alt="">
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  props:{
    list: Array
  },
  data(){
    return {
      swiperOptions: {
          autoplay: false
          // Some Swiper option/callback...
        }
    }
  },
  mounted(){
    console.log(this.pages)
  },
  computed: {
    // 将数据拆分成 [ [],[], ... ]形式 
    pages () {
      const pages = []
      this.list.forEach( (item, index) => {
        const page = Math.floor( index / 8 )
        if( !pages[page] ){
          pages[page] = []
        }
        pages[page].push( item )
      })
      return pages
    }
  }
}
</script>
<style lang='stylus' scoped >
  @import '~styles/varibles.styl'
  @import '~styles/mixin.styl'
  .icons >>> .swiper-container 
    height :0
    padding-bottom :50%
    overflow :hidden
  .icons
    margin-top :.1rem
    .icon
      position :relative
      overflow :hidden
      float :left
      width :25%
      height :0
      padding-bottom :25%
      .icon-img 
        position :absolute;
        top :0px
        left :0
        right :0
        bottom :.44rem
        padding :.1rem
        box-sizing :border-box
        .icon-img-content
          display :block
          margin :5px auto
          height :100%
      .icon-desc {
        position :absolute
        left :0
        right :0
        bottom :0
        height : .44rem
        line-height .44rem
        text-align :center
        color :$darkTextColor
        ellipsis()
      }

   
</style>
